<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="edge" />
<link rel="shortcut icon" href="../static/img/logo2.jpg" />

<script type="text/javascript" src="../static/My97DatePicker/WdatePicker.js" charset="utf-8"></script>

<script type="text/javascript" src="../static/easyui/jquery.min.js" charset="utf-8"></script>

<link id="easyuiTheme" rel="stylesheet" type="text/css" href="../static/easyui/themes/default/easyui.css" />
<link id="easyuiTheme" rel="stylesheet" type="text/css" href="../static/easyui/themes/icon.css" />
<script type="text/javascript" src="../static/easyui/jquery.easyui.min.js" charset="utf-8"></script>
<script type="text/javascript" src="../static/easyui/locale/easyui-lang-zh_CN.js" charset="utf-8"></script>

<script type="text/javascript" src="../static/extJs.js" charset="utf-8"></script>

<link rel="stylesheet" type="text/css" href="../static/ztree/css/zTreeStyle.css" />
<script type="text/javascript" src="../static/ztree/js/jquery.ztree.core.js" charset="utf-8"></script>
<script type="text/javascript" src="../static/ztree/js/jquery.ztree.excheck.js" charset="utf-8"></script>

<link rel="stylesheet" type="text/css" href="../static/style/css/dreamlu.css?v=10" />
<link rel="stylesheet" type="text/css" href="../static/foundation-icons/foundation-icons.css" />

<style type="text/css">
.datagrid-cell-group, .datagrid-header-rownumber, .datagrid-cell-rownumber {
    margin: 0;
    padding: 0 4px;
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;
    height: 26px;
    line-height: 28px!important;
    font-size:12px;
 }
</style>


	<script type="text/javascript" src="../static/datagrid-detailview.js"></script>
</head>
<body>
	<h2>Expand row in DataGrid to show subgrid</h2>
	<div class="demo-info" style="margin-bottom:10px">
		<div class="demo-tip icon-tip"> </div>
		<div>Click the expand button to expand row and view subgrid.</div>
	</div>
	
	<div id="dg" style="width:650px;height:250px"></div>
	<script type="text/javascript">
		$(function(){
			$('#dg').datagrid({
				view: detailview,
				url:"datagrid_data.json",
				singleSelect:"true" ,
				fitColumns:"true",
				striped:true,
				checkOnSelect:'true',
				 pagination : true,
				 pageList : [ 10, 20, 30, 40, 50, 100, 200, 300, 400, 500 ],
				 pageSize : 20,
				columns:[[
						{field:'itemid',title:'Order ID',width:200},
						{field:'productid',title:'Quantity',width:100,align:'right'},
						{field:'unitcost',title:'Unit Price',width:100,align:'right'}
					]],
				detailFormatter:function(index,row){
					return '<div style="padding:2px"><table id="ddv-' + index + '"></table></div>';
				},
				onExpandRow: function(index,row){
					$('#ddv-'+index).datagrid({//?itemid='+row.itemid
						url:'datagrid-detaildata.json?itemid='+row.itemid,
						fitColumns:true,
						singleSelect:true,
						rownumbers:true,
						loadMsg:'',
						height:'auto',
						columns:[[
							{field:'orderid',title:'Order ID',width:200},
							{field:'quantity',title:'Quantity',width:100,align:'right'},
							{field:'unitprice',title:'Unit Price',width:100,align:'right'},
							{field:'op',title:'操作',width:100,align:'right',formatter:formatOper}
						]],
						onResize:function(){
							$('#dg').datagrid('fixDetailRowHeight',index);
						},
						onLoadSuccess:function(){
							$('#dg').datagrid("selectRow", index)
							setTimeout(function(){
								$('#dg').datagrid('fixDetailRowHeight',index);
							},0);
						}
					});
					$('#dg').datagrid('fixDetailRowHeight',index);
				}
			});
		});
		function formatOper(val,row,index){  
		    return '<a href="#" onclick="editUser('+index+')">修改</a>';  
		}  
		function editUser(index){
			alert("ddd");
			
		}
	</script>
	
</body>
</html>